<template>
<div class="layout">
	<Row>
		<Col span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>

		<Col span="6">
			<Input v-model="key">
				<Select v-model="filterKey" slot="prepend" style="width: 80px">
					<Option v-for="item in keyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</Input>
		</Col>
		<Col span="2">
			<Select  placeholder="请选择状态" clearable v-model="statusKey" :style="{marginLeft:'15px'}">
				<Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</Col>
		<Col span="8">
			<Button type="primary" :style="{marginLeft:'30px'}" @click="search">搜索</Button>
			<Button type="info" @click="init()"><Icon type="md-refresh" :size="16"/></Button>
		</Col>

		<Col span="24">
			<div class="cleaner10"></div>
			<Table :loading="tableLoading" border stripe :columns="columns" :data="commentData.data"></Table>
			<div class="cleaner10"></div>
			<Page @on-page-size-change="changePageSize" @on-change="changePage" :total="commentData.total" :page-size="commentData.pageSize" :current.sync="commentData.page" :transfer="true" show-elevator show-sizer></Page>
		</Col>
	</Row>
</div>
</template>
<script>

// 引入子组件
import {mapState,mapGetters} from 'vuex'
import { Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input } from 'iview';
export default {
	name:'welisten-listener-apply',
	components: {Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input},
	data () {
		return {
			title:'咨询师申请列表',
			tableLoading:true,
			commentData:[],
			statusKey:'',
			statusList: [
				{value: 1,label: '审核中'},
				{value: 2,label: '已通过'},
				{value: 3,label: '已拒绝'},
			],
			filterKey:'',
			key:'',
			keyList: [
				{value: 'nickname',label: '昵称'},
				{value: 'family_status',label: '婚姻状态'},
				{value: 'mobile',label: '手机号'},
				{value: 'city',label: '城市'},
				{value: 'education',label: '学历'},
				{value: 'occupation',label: '职业'},
			],
			columns:[
				{title: '会员号',key: 'idno',width: 90,fixed: 'left'},
				{title: '昵称',key: 'nickname'},
                {title: '性别',key: 'sex',width: 90,
					render: (h, params) => {

                        let _status=['保密','男','女']
                        return h('div',[
                            h('span', {
                                class: '',
                            }, _status[params.row.sex]),
                        ])
                    }
                 },
				{title: '状态',key: 'status',
					render: (h, params) => {
						let _status=['审核中','已通过','已拒绝','删除']
						return h('div',[
							h('span', {
							class: 1==params.row.status?'success':(2==params.row.status?'warning':(3==params.row.status?'error':'draft')),
						}, _status[params.row.status-1]),
						])
					}
				},
				{title: '年龄',key: 'age',width: 90},
                {title: '学历',key: 'education',width: 90},
                {title: '手机号',key: 'mobile'},
                {title: '家庭状态',key: 'family_status',width: 90},
                {title: '城市',key: 'city'},
                {title: '提交时间',key: 'created_at'},
				{
					title: '动作',
					key: 'action',
					align: 'left',
					fixed: 'right',
					width:150,
					render: (h, params) => {
						return h('div', [
							h(Button, {
								props: {
									type: 'success',
									size: 'small',
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {this.$router.push({path:'/welisten/listener/apply_detail/'+params.row.aid})}
								}
							}, '查看'),
							h(Button, {
								props: {
									type: 'primary',
									size: 'small'
								},
								style: {
									marginRight: '5px',
									display:1!=params.row.status?'none':'inline-block'
								},
								on: {
                                    click: () => {
                                        this.$Modal.confirm({
                                            title: '温馨提示',
                                            content: '确认通过审核吗？',
                                            onOk: () => {
                                                this.onPass(params.row.aid,params.index)
                                            },
                                        })
                                    }
								}
							}, '通过')
						]);
					}
				}

			],
		}
	},
	methods:{
		init:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/welisten/applies",{params: { 'token': self.token }})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				self.$Message.error(error.message)
				self.tableLoading=false
			})
		},
		changePage:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/welisten/applies",{params: { 'token': self.token, page:self.commentData.page, pageSize: self.commentData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,status:self.statusKey}}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info(error.message);
				self.tableLoading=false
			})
		},
		changePageSize:function(val){
			let self=this
			self.commentData.pageSize=val
			self.tableLoading=true
			self.$http.get("/v1/welisten/applies",{params: { 'token': self.token, page:1, pageSize: self.commentData.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})
		},
        onPass:function(id,index){
            let self=this
            self.$http.post("/v1/welisten/applies?_method=put&token="+self.token,{'id':id,'data':'{"status":"1"}'})
                .then(function(response){
                    if(200==response.data.status && 0==response.data.code)
                    {
                        self.commentData.data[index].status=2
                        self.$Message.success('操作成功');
                    }else{
                        self.$Message.error(response.data.message);
                    }
                }).catch(function(error){
                self.$Message.error( error.message);
            })
        },
		search:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/welisten/applies",{params: { 'token': self.token, page:1, pageSize: self.commentData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,status:self.statusKey}
			}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})

		}
	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
	},
	computed:{
		...mapGetters(['token']),
	}
}



</script>
<style lang="less" scoped>
</style>
